<template>
  <div class="top">
    <div class="top_left">
      <img src="../assets/SEN.png" alt="" class="img1">
      <i class="iconfont" @click="TOGGLE_SIDEBAR" :class="!sidebar ? 'icon-foldLeft' : 'icon-foldRight'"></i>
    </div>

    <div class="top_right">
      {{ username }}({{ type==1 ? "超级管理员" : (type==3) ? "普通管理员" : "观察员" }})
      <img src="../assets/img/gita.gif" alt="" class="img2"> |
      <a href="#" @click="LogoutAction">退出登录</a>
      <img src="../assets/CN.png" alt="">
    </div>
  </div>
</template>

<script>
//引入动作的辅助函数
import { mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "MyHeader",
  methods: {
    ...mapMutations(["TOGGLE_SIDEBAR"]),
    ...mapActions(["LogoutAction"]),
  },
  computed: {
    ...mapGetters(["sidebar","username","type"]),
  },
}
</script>

<style scoped lang="scss">
.top{
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top_left{
  display: flex;
  align-items: center;
  i{
    margin-left: 25px;
  }
}
.top .img1{
  width: 100px;
  margin-left: 20px;
}
.top_right{
  height: 100%;
  display: flex;
  align-items: center;
}
.top_right a{
  margin-left: 5px;
}
.top_right .img2{
  width: 25px;
  height: 25px;
  margin-right: 5px;
}
.top_right img{
  width: 50px;
  height: 50px;
}
</style>